<template>
  <div class="feedbackManagement">
    <h3>账号找回</h3>
    <div class="search">
      <div class="cond1 cond">
        <el-input placeholder="请输入用户名" v-model="search1">
          <template slot="prepend">用户名</template>
        </el-input>
      </div>
      <div class="cond2 cond">
        <label>状态</label>
        <el-select v-model="search3" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <div class="list">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="序号"
          sortable
          width="80"
        ></el-table-column>
         <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="用户名"
          width="150"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="曾用花名"
          width="150"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="曾用手机号"
          width="150"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="开通会员时的订单号"
          width="150"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="该账号注册时间"
          width="150"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="备注"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="提交时间"
          width="150"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="状态"
          width="80"
        ></el-table-column>
        <el-table-column header-align="center" align="center" label="操作"  fixed="right" width="130">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="handleView(scope.$index, scope.row)">标记为已处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next, jumper"
        :total="1000"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "feedbackManagement",
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "全部"
        },
        {
          value: "选项2",
          label: "已处理"
        },
        {
          value: "选项3",
          label: "未处理"
        },
        
      ],
      search1: "",
      search2: "",
      search3: "",
      search4: "",
      //表格数据
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          num: 1,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          num: 2,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          num: 3,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          num: 4,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        }
      ],
      currentPage1: 1,
      //查看详情弹窗
      centerDialogVisible:false,
      //回复内容
      replyText:"",
    };
  },
  mounted() {},
  methods: {
       // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
    },
      //显示查看弹窗
      handleView(index, row){
          this.centerDialogVisible=true;
      }
  }
};
</script>
<style scoped>
h3{
    padding:.2rem;
    color:#3c763d;
}
.search {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.search .el-select >>> .el-input__inner {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.search .el-select {
  width: 1.67rem;
}
.page {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}
.list {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
.detail .title {
  margin-bottom: 0.1rem;
  color: #05a4bf;
}
.detail .detailBox {
  display: flex;
  flex-wrap: wrap;
}
.detail .detailItem {
  width: 100%;
  margin-bottom: 0.1rem;
}
.dialogBtn {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.reply{
    width:100%;
    margin-top:.2rem;
}
.reply textarea{
    width:100%;
    height:1.5rem;
    padding:.1rem;
}
</style>